<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mail</title>
<link rel="stylesheet" th:href="@{/easy/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
<style type="text/css">
ul li:hover {
	background: #FFEFD5;
}
</style>
</head>
<body class="bg-s">
	<div class="container-fluid" ms-controller="vm">
		<div class="row">
			<div style="font-size: 18px;"
				class="col text-center bg-primary text-white">发 件 箱</div>
		</div>
		<div class="row mt-4">
			<div class="col-9">
				<div>
					<div style="color: black; font-weight: bold; font-size: 18px"
						class="ml-1">收 件 人</div>
					<input id="receiver" type="text" placeholder="_请输入收件人"
						class="form-control form-control-sm mt-1" />
				</div>
				<div class="mt-2">
					<span style="color: black; font-weight: bold; font-size: 18px;">主题</span>
					<input id="title" type="text" placeholder="_请输入标题"
						th:value="${title}" class="form-control form-control-sm" />
				</div>
				<div class="mt-2">
					<span style="color: black; font-weight: bold; font-size: 18px;">正文内容</span>
					<textarea id="content" rows="8" th:text="${content}"
						class="mt-2 form-control form-control-sm"></textarea>
				</div>
				<div>
					<button class="mt-3 btn btn-sm btn-success" onclick="sendMail()">发送</button>
					<button class="mt-3 btn btn-sm btn-danger ml-2" onclick="cancel()">取消</button>
				</div>
			</div>
			<div class="col-3 mt-4">
				<ul class="list-group" style="height: 500px; overflow: auto">
					<li style="background-color: #C5C1AA;"
						class="text-white list-group-item"><i
						class="fa fa-address-book-o mr-1" aria-hidden="true"></i>通讯录</li>
					<li class="list-group-item form-inline"><input id="value"
						placeholder="_输入好友名" class="form-control form-control-sm" /></li>
					<li ms-for="s in @list" class="list-group-item"
						onclick="setReceiver(this)">{{s.fri_account}}</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/easy/js/jquery.js}"></script>
	<script th:src="@{/easy/js/avalon.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script>
		//sendMail
		function sendMail() {
			$.post("/mona/MsgComm/sendMail", {
				receiver : $("#receiver").val(),
				title : $("#title").val(),
				content : $("#content").val(),
			}, function(data) {
				layer.msg(data);
				$("#receiver").val("");
				$("#title").val("");
				$("#content").val("");
			});
		}
		//-- 显示右侧联系人
		var vm = avalon.define({
			$id : "vm",
			list : []
		});
		showAllCon();
		function showAllCon() {
			$.post("/mona/Contacts/showAll", {}, function(data) {
				vm.list = data;
			});
		}
		//-- 动态填充收件人
		$("#value").bind("input propertychange", function() {
			$.post("/mona/Contacts/showConByKey", {
				key : $("#value").val()
			}, function(data) {
				vm.list = data;
			});
		});
		function setReceiver(account) {
			var a = $(account);
			$("#receiver").val(a.text());
		}
		//--取消
		function cancel() {
			location.href = "/mona/MsgInfo/toReceive";
		}
	</script>
</body>
</html>